﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
      body{
        width: 100%;
        height: 100%;
        background-color: #263238;
        color: #ffffff;
        text-decoration: none;
        margin:0;
      }
      a:hover{
        color: #bda8a8;
      }
      a:active{
        color: #e4cfec;
      }
      a:visited{
        color: #eccfeb;
      }
    </style>
</head>
<body >
  <DIV style="padding: 10px;">
  <P>控件间交互演示</P>
  <P>点击链接在右边浏览框中打开</P>
  <ul>
    <li><a target="_blank" href="https://www.voldp.com/">火山官网</a></li>
    <li><a target="_blank" href="https://bbs.voldp.com/forum.php">火山论坛</a></li>
    <li><a target="_blank" href="https://bbs.voldp.com/forum-2-1.html">火山俱平台乐部</a></li>
    <li></li>
    <li><a target="_blank" href="https://www.baidu.com">百度</a></li>
    <li><a target="_blank" href="https://learn.microsoft.com/zh-cn/microsoft-edge/webview2/">Edge WebView2</a></li>
  </ul>
</DIV>
  <DIV style="padding: 10px;">
    <P>发送消息</P>
    <textarea id="text" style="width: 90%;">hello!!</textarea>
    <button onclick="sendMsg()">发送</button>
    <script>
      // 发送消息
      function sendMsg() {
        var text = document.getElementById("text").value
        window.chrome.webview.postMessage("sendMsg"+text)
      }
    </script>
  </DIV>
  <DIV style="padding: 10px;">
    <P>执行脚本</P>
    <textarea id="text2" style="width: 90%;">alert(document.title)</textarea>
    <button onclick="runscript()">发送</button>
    <textarea id="text3" style="width: 90%;">prompt('你今年多大了?','请在这里输入年龄')</textarea>
    <button onclick="runscript2()">发送</button>
    
    <script>
      // 执行脚本
      function runscript() {
        var js = document.getElementById("text2").value
        window.chrome.webview.postMessage("script"+js)
      }
      function runscript2() {
        var js = document.getElementById("text3").value
        window.chrome.webview.postMessage("script"+js)
      }
      
      
    
      
    </script>
  </DIV>
</body>
</html>
